/**
 * 应用商城原型 - 主JavaScript文件
 * 实现页面交互、导航和动态效果
 */

// 页面加载完成后执行
document.addEventListener("DOMContentLoaded", function () {
  // 更新状态栏时间
  updateStatusBarTime();
  setInterval(updateStatusBarTime, 60000); // 每分钟更新一次

  // 初始化页面导航
  initNavigation();

  // 初始化搜索框
  initSearchBox();

  // 初始化应用下载按钮
  initDownloadButtons();

  // 初始化轮播图
  initCarousel();

  // 初始化分享功能
  initShareFeature();
});

/**
 * 更新状态栏时间
 */
function updateStatusBarTime() {
  const timeElement = document.querySelector(".time");
  if (timeElement) {
    const now = new Date();
    const hours = now.getHours().toString().padStart(2, "0");
    const minutes = now.getMinutes().toString().padStart(2, "0");
    timeElement.textContent = `${hours}:${minutes}`;
  }
}

/**
 * 初始化页面导航
 */
function initNavigation() {
  // 获取所有导航项
  const tabItems = document.querySelectorAll(".tab-item");
  if (!tabItems.length) return;

  // 为每个导航项添加点击事件
  tabItems.forEach(item => {
    item.addEventListener("click", function () {
      // 移除所有导航项的active类
      tabItems.forEach(tab => tab.classList.remove("active"));

      // 为当前点击的导航项添加active类
      this.classList.add("active");

      // 获取当前导航项对应的页面名称
      const pageName = this.querySelector("span").textContent.trim();

      // 模拟页面切换
      simulatePageChange(pageName);
    });
  });
}

/**
 * 模拟页面切换
 * @param {string} pageName - 页面名称
 */
function simulatePageChange(pageName) {
  console.log(`页面切换至: ${pageName}`);

  // 根据页面名称映射到对应的HTML文件
  const pageMap = {
    首页: "home.html",
    发现: "search.html",
    下载: "profile.html", // 临时映射，可根据实际需求调整
    我的: "profile.html",
  };

  // 获取父窗口，模拟iframe切换
  if (window.parent && window.parent !== window) {
    const targetPage = pageMap[pageName];
    if (targetPage) {
      // 如果已经在当前页面，不做操作
      if (window.location.href.endsWith(targetPage)) return;

      // 通知父窗口切换页面
      window.parent.postMessage(
        {
          action: "changePage",
          page: targetPage,
        },
        "*"
      );
    }
  }
}

/**
 * 初始化搜索框
 */
function initSearchBox() {
  const searchBox = document.querySelector(".search-box");
  if (!searchBox) return;

  const searchInput = searchBox.querySelector("input");
  if (!searchInput) return;

  // 为搜索框添加点击事件
  searchBox.addEventListener("click", function () {
    // 显示搜索动画
    searchBox.classList.add("active");

    // 模拟跳转到搜索页面
    if (window.parent && window.parent !== window) {
      window.parent.postMessage(
        {
          action: "changePage",
          page: "search.html",
        },
        "*"
      );
    } else {
      console.log("跳转到搜索页面");
    }
  });
}

/**
 * 初始化应用下载按钮
 */
function initDownloadButtons() {
  const downloadButtons = document.querySelectorAll(".app-download-btn");
  if (!downloadButtons.length) return;

  downloadButtons.forEach(button => {
    button.addEventListener("click", function (e) {
      e.preventDefault();

      // 获取应用名称
      const appCard = this.closest(".app-card");
      const appName = appCard
        ? appCard.querySelector(".app-name").textContent
        : "应用";

      // 切换按钮状态，模拟下载过程
      this.classList.add("downloading");
      this.textContent = "下载中...";

      // 模拟下载进度
      setTimeout(() => {
        this.textContent = "安装中...";

        setTimeout(() => {
          this.classList.remove("downloading");
          this.classList.add("installed");
          this.textContent = "打开";

          // 显示下载完成提示
          showToast(`${appName} 已安装成功`);
        }, 1500);
      }, 2000);
    });
  });
}

/**
 * 显示提示消息
 * @param {string} message - 提示消息内容
 * @param {number} duration - 显示时长（毫秒）
 */
function showToast(message, duration = 2000) {
  // 检查是否已存在toast元素
  let toast = document.querySelector(".toast-message");

  // 如果不存在，创建新的toast元素
  if (!toast) {
    toast = document.createElement("div");
    toast.className = "toast-message";
    document.body.appendChild(toast);
  }

  // 设置消息内容
  toast.textContent = message;

  // 显示toast
  toast.classList.add("show");

  // 设置定时器，在指定时间后隐藏toast
  setTimeout(() => {
    toast.classList.remove("show");
  }, duration);
}

/**
 * 初始化轮播图
 */
function initCarousel() {
  const swiper = document.querySelector(".swiper");
  if (!swiper) return;

  // 创建轮播图容器
  const swiperWrapper = document.createElement("div");
  swiperWrapper.className = "swiper-wrapper";

  // 获取原始图片
  const originalImage = swiper.querySelector("img");
  if (!originalImage) return;

  // 创建多个轮播图片
  const images = [
    originalImage.src,
    "https://img.hsbkw.com/2025/03/20250308180341276.png",
    "https://img.hsbkw.com/2025/03/20250308180341276.png",
  ];

  // 清空原内容
  swiper.innerHTML = "";
  swiper.appendChild(swiperWrapper);

  // 添加轮播图片
  images.forEach((src, index) => {
    const slide = document.createElement("div");
    slide.className = "swiper-slide";

    const img = document.createElement("img");
    img.src = src;
    img.alt = `轮播图 ${index + 1}`;
    img.className = "swiper-image";

    slide.appendChild(img);
    swiperWrapper.appendChild(slide);
  });

  // 添加指示器
  const pagination = document.createElement("div");
  pagination.className = "swiper-pagination";
  swiper.appendChild(pagination);

  // 创建指示器点
  images.forEach((_, index) => {
    const dot = document.createElement("span");
    dot.className = "swiper-dot";
    if (index === 0) dot.classList.add("active");
    pagination.appendChild(dot);
  });

  // 当前轮播图索引
  let currentIndex = 0;

  // 自动轮播
  setInterval(() => {
    currentIndex = (currentIndex + 1) % images.length;
    updateCarousel();
  }, 4000);

  // 更新轮播图显示
  function updateCarousel() {
    // 更新轮播图位置
    swiperWrapper.style.transform = `translateX(-${currentIndex * 100}%)`;

    // 更新指示器
    const dots = pagination.querySelectorAll(".swiper-dot");
    dots.forEach((dot, index) => {
      if (index === currentIndex) {
        dot.classList.add("active");
      } else {
        dot.classList.remove("active");
      }
    });
  }
}

/**
 * 初始化分享功能
 */
function initShareFeature() {
  const shareButtons = document.querySelectorAll(".share-button");
  if (!shareButtons.length) return;

  shareButtons.forEach(button => {
    button.addEventListener("click", function (e) {
      e.preventDefault();

      // 获取要分享的内容
      const articleTitle =
        document.querySelector(".article-title")?.textContent || "精彩文章";
      const appName =
        document.querySelector(".app-detail-name")?.textContent || "推荐应用";

      // 显示分享面板
      showSharePanel(articleTitle, appName);
    });
  });
}

/**
 * 显示分享面板
 * @param {string} title - 分享标题
 * @param {string} content - 分享内容
 */
function showSharePanel(title, content) {
  // 检查是否已存在分享面板
  let sharePanel = document.querySelector(".share-panel");

  // 如果不存在，创建新的分享面板
  if (!sharePanel) {
    sharePanel = document.createElement("div");
    sharePanel.className = "share-panel";

    // 创建面板内容
    const sharePanelContent = `
      <div class="share-panel-header">
        <span>分享至</span>
        <button class="share-panel-close">
          <i class="fas fa-times"></i>
        </button>
      </div>
      <div class="share-panel-options">
        <div class="share-option">
          <div class="share-icon wechat">
            <i class="fab fa-weixin"></i>
          </div>
          <span>微信</span>
        </div>
        <div class="share-option">
          <div class="share-icon weibo">
            <i class="fab fa-weibo"></i>
          </div>
          <span>微博</span>
        </div>
        <div class="share-option">
          <div class="share-icon qq">
            <i class="fab fa-qq"></i>
          </div>
          <span>QQ</span>
        </div>
        <div class="share-option">
          <div class="share-icon link">
            <i class="fas fa-link"></i>
          </div>
          <span>复制链接</span>
        </div>
      </div>
      <div class="share-panel-content">
        <p class="share-title">${title}</p>
        <p class="share-desc">来自应用商城的${content}</p>
      </div>
    `;

    sharePanel.innerHTML = sharePanelContent;
    document.body.appendChild(sharePanel);

    // 添加关闭按钮事件
    const closeButton = sharePanel.querySelector(".share-panel-close");
    closeButton.addEventListener("click", () => {
      sharePanel.classList.remove("show");

      // 移除遮罩层
      const overlay = document.querySelector(".share-overlay");
      if (overlay) overlay.remove();
    });

    // 为分享选项添加点击事件
    const shareOptions = sharePanel.querySelectorAll(".share-option");
    shareOptions.forEach(option => {
      option.addEventListener("click", function () {
        const platform = this.querySelector("span").textContent;
        showToast(`已分享至${platform}`);

        // 模拟分享完成后关闭面板
        setTimeout(() => {
          sharePanel.classList.remove("show");
          const overlay = document.querySelector(".share-overlay");
          if (overlay) overlay.remove();
        }, 1000);
      });
    });
  }

  // 创建遮罩层
  const overlay = document.createElement("div");
  overlay.className = "share-overlay";
  document.body.appendChild(overlay);

  // 显示分享面板
  setTimeout(() => {
    sharePanel.classList.add("show");
  }, 100);

  // 点击遮罩层关闭分享面板
  overlay.addEventListener("click", () => {
    sharePanel.classList.remove("show");
    overlay.remove();
  });
}

// 为父窗口添加消息监听
window.addEventListener("message", function (event) {
  // 处理页面切换消息
  if (event.data.action === "changePage") {
    console.log(`接收到页面切换消息: ${event.data.page}`);
  }
});
